<template>
<div class="body1"> 
  <el-header>
   <start-header/>
  </el-header>
<div class="body2">
    <div class="content"></div>
  <div class="contents">
    <div class="information"></div>
    <div class="blank"></div>
    <div class="manages">
    <el-tabs v-model="activeName" type="border-card" @tab-click="ClickManage" >
    <el-tab-pane label="用户管理" name="first">
    <el-table
    :data="tableData"
    style="width:800px"
    height="250">
    <el-table-column
      fixed
      prop="id"
      label="ID"
      width="80">
    </el-table-column>
    <el-table-column
      prop="user_name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="user_password"
      label="密码"
      width="120">
    </el-table-column>
    <el-table-column
      prop="is_male"
      label="性别"
      width="120">
    </el-table-column>
    <el-table-column
      prop="birthday"
      label="生日"
      width="300">
    </el-table-column>
    <el-table-column
      prop="head"
      label="头像"
      width="120">
    </el-table-column>
     <el-table-column
      prop="permission"
      label="权限"
      width="120">
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
      width="230">
      <template slot-scope="scope">
        <el-button  size="mini" type="success"  @click="dialogFormbVisible = true; handleEditUser(scope.row)">编辑</el-button> 
        <el-button
          size="mini"
          type="danger"
          @click="handleDeleteUsers(scope.row)">删除</el-button>
          </template>
    </el-table-column>
  </el-table>
    </el-tab-pane>
    <el-tab-pane label="题目管理" name="second">
        <el-table
    :data="tableData2"
    style="width:800px"
    height="250"
    @change="changeSelect"
     >
    <el-table-column
      fixed
      prop="id"
      label="ID"
      width="80">
    </el-table-column>
    <el-table-column
      prop="question_type"
      label="问题类型"
      width="120">
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题"
      width="120">
    </el-table-column>
    <el-table-column
      prop="description"
      label="描述"
      width="120">
    </el-table-column>
    <el-table-column
      prop="input_description"
      label="输入格式"
      width="120">
    </el-table-column>
    <el-table-column
      prop="output_description"
      label="输出格式"
      width="120">
    </el-table-column>
     <el-table-column
      prop="question_range"
      label="数据范围"
      width="120">
    </el-table-column>
     <el-table-column
      prop="input_sample"
      label="样例输入"
      width="120">
    </el-table-column>
    <el-table-column
      prop="output_sample"
      label="样例输出"
      width="120">
    </el-table-column>
    <el-table-column
      prop="ac"
      label="总通过数"
      width="120">
    </el-table-column>
    <el-table-column
      prop="wa"
      label="未通过数"
      width="120">
    </el-table-column>
    <el-table-column
      prop="time_limit"
      label="时间限制"
      width="120">
    </el-table-column>
    <el-table-column
      prop="memory_limit"
      label="空间限制"
      width="120">
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
      width="230">
      <template slot-scope="scope">
      <el-button  size="mini" type="success"  @click="dialogFormcVisible = true; handleEditQuestion(scope.row)" >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
          </template>
    </el-table-column>
  </el-table>
    </el-tab-pane>
  </el-tabs>
  <!-- 增加题目 -->
  <el-dialog title="增加题目" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="ID" :label-width="formLabelWidth">
      <el-input v-model="form.id" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="问题类型" :label-width="formLabelWidth">
      <el-input v-model="form.question_type" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="困难程度" :label-width="formLabelWidth">
      <el-input v-model="form.difficulty" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="标题" :label-width="formLabelWidth">
      <el-input v-model="form.title" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="描述" :label-width="formLabelWidth">
      <el-input v-model="form.description" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="输入格式" :label-width="formLabelWidth">
      <el-input v-model="form.input_description" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="输出格式" :label-width="formLabelWidth">
      <el-input v-model="form.output_description" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="数据范围" :label-width="formLabelWidth">
      <el-input v-model="form.question_range" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="样例输入" :label-width="formLabelWidth">
      <el-input v-model="form.input_sample" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="样例输出" :label-width="formLabelWidth">
      <el-input v-model="form.output_sample" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="总通过数" :label-width="formLabelWidth">
      <el-input v-model="form.ac" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="未通过数" :label-width="formLabelWidth">
      <el-input v-model="form.wa" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="时间限制" :label-width="formLabelWidth">
      <el-input v-model="form.time_limit" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="空间限制" :label-width="formLabelWidth">
      <el-input v-model="form.memory_limit" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false;addClickQuestion()">确 定</el-button>
  </div>
</el-dialog>
<el-button  size="mini" type="primary"  @click="dialogFormaVisible = true">增加用户</el-button>
<el-button size="mini" type="primary"  @click="dialogFormVisible = true" style="margin-top:10px;margin-left:10px;" >增加题目</el-button>
 <!-- //增加用户信息 -->
 <el-dialog title="增加用户" :visible.sync="dialogFormaVisible">
  <el-form :model="gridData">
    <el-form-item label="ID" :label-width="formLabelWidth">
      <el-input v-model="gridData.id" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="用户姓名" :label-width="formLabelWidth">
      <el-input v-model="gridData.user_name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" :label-width="formLabelWidth">
      <el-input v-model="gridData.user_password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth">
      <el-input v-model="gridData.is_male" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="生日" :label-width="formLabelWidth">
      <el-input v-model="gridData.birthday" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="头像" :label-width="formLabelWidth">
      <el-input v-model="gridData.head" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="权限" :label-width="formLabelWidth">
      <el-input v-model="gridData.permission" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormaVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormaVisible = false;addClickUser()">确 定</el-button>
  </div> 
</el-dialog>
<!-- 编辑用户信息 -->
 <el-dialog title="编辑用户信息" :visible.sync="dialogFormbVisible">
   <el-form :model="tableData4">
    <el-form-item label="ID" :label-width="formLabelWidth">
      <el-input v-model="tableData4.id" autocomplete="off">{{this.tableData4.id}}</el-input>
    </el-form-item>
    <el-form-item label="用户姓名" :label-width="formLabelWidth">
      <el-input v-model="tableData4.user_name" autocomplete="off">{{this.tableData4.user_name}}</el-input>
    </el-form-item>
    <el-form-item label="密码" :label-width="formLabelWidth">
      <el-input v-model="tableData4.user_password" autocomplete="off">{{this.tableData4.user_password}}</el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth">
      <el-input v-model="tableData4.is_male" autocomplete="off">{{this.tableData4.is_male}}</el-input>
    </el-form-item>
    <el-form-item label="生日" :label-width="formLabelWidth">
      <el-input v-model="tableData4.birthday" autocomplete="off">{{this.tableData4.birthday}}</el-input>
    </el-form-item>
    <el-form-item label="头像" :label-width="formLabelWidth">
      <el-input v-model="tableData4.head" autocomplete="off" >{{this.tableData4.head}}</el-input>
    </el-form-item>
    <el-form-item label="权限" :label-width="formLabelWidth">
      <el-input v-model="tableData4.permission" autocomplete="off">{{this.tableData4.permission}}</el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormbVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormbVisible = false;addClickUserEditor()">确 定</el-button>
  </div>
</el-dialog>
<!-- 编辑题目信息 -->
<el-dialog title="编辑题目信息" :visible.sync="dialogFormcVisible">
   <el-form :model="form2">
    <el-form-item label="ID" :label-width="formLabelWidth">
      <el-input v-model="form2.id" autocomplete="off">{{this.form2.id}}</el-input>
    </el-form-item>
    <el-form-item label="问题类型" :label-width="formLabelWidth">
      <el-input v-model="form2.question_type" autocomplete="off">{{this.form2.question_type}}</el-input>
    </el-form-item>
    <el-form-item label="困难程度" :label-width="formLabelWidth">
      <el-input v-model="form2.difficulty" autocomplete="off">{{this.form2.difficulty}}</el-input>
    </el-form-item>
    <el-form-item label="标题" :label-width="formLabelWidth">
      <el-input v-model="form2.title" autocomplete="off">{{this.form2.title}}</el-input>
    </el-form-item>
    <el-form-item label="描述" :label-width="formLabelWidth">
      <el-input v-model="form2.description" autocomplete="off">{{this.form2.description}}</el-input>
    </el-form-item>
    <el-form-item label="输入格式" :label-width="formLabelWidth">
      <el-input v-model="form2.input_description" autocomplete="off" >{{this.form2.input_description}}</el-input>
    </el-form-item>
    <el-form-item label="输出格式" :label-width="formLabelWidth">
      <el-input v-model="form2.output_description" autocomplete="off">{{this.form2.output_description}}</el-input>
    </el-form-item>
    <el-form-item label="数据范围" :label-width="formLabelWidth">
      <el-input v-model="form2.question_range" autocomplete="off">{{this.form2.question_range}}</el-input>
    </el-form-item>
    <el-form-item label="样例输入" :label-width="formLabelWidth">
      <el-input v-model="form2.input_samplen" autocomplete="off">{{this.form2.input_sample}}</el-input>
    </el-form-item>
     <el-form-item label="样例输出" :label-width="formLabelWidth">
      <el-input v-model="form2.output_sample" autocomplete="off">{{this.form2.output_sample}}</el-input>
    </el-form-item>
     <el-form-item label="总通过数" :label-width="formLabelWidth">
      <el-input v-model="form2.ac" autocomplete="off">{{this.form2.ac}}</el-input>
    </el-form-item>
     <el-form-item label="未通过数" :label-width="formLabelWidth">
      <el-input v-model="form2.wa" autocomplete="off">{{this.form2.wa}}</el-input>
    </el-form-item>
     <el-form-item label="时间限制" :label-width="formLabelWidth">
      <el-input v-model="form2.time_limit" autocomplete="off">{{this.form2.time_limit}}</el-input>
    </el-form-item>
     <el-form-item label="空间限制" :label-width="formLabelWidth">
      <el-input v-model="form2.memory_limit" autocomplete="off">{{this.form2.memory_limit}}</el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormcVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormcVisible = false;addClickQuestionEditor()">确 定</el-button>
  </div>
</el-dialog>
    </div>
  </div>
    <div class="content"></div>
</div>
<div class="bottom"> 
  <start-footer />
  </div>
<!-- <Content :aaaa="aaaa" :row="scope.row"></Content> -->
</div>
</template>
<style>
.el-header{ 
        background-color: #DCE4F1;
        /* background-color: black; */
        color: #333; 
        text-align: center; 
        line-height: 80px;
    }
.blank{
    flex:0.7;
    background-color:  transparent;
}
.information{
    flex:4;
    /* background-color:black; */
      background-color: rgb(210, 219, 240,0.5);
      border-radius: 5px;
      box-shadow: 0 0 5px 5px rgba(200, 205, 233, 0.3);
}
.manages{
    flex:16;
    background-color: rgb(210, 219, 240,0.5);
     border-radius: 5px;
      box-shadow: 0 0 5px 5px rgba(200, 205, 233, 0.3);
}
.body1{
  display:flex;
  flex-direction:column;
}
.el-menu-demo{
  flex: 0 0 30px;
}
.content{
  flex:2;
  display: flex;
}
.contents{
  flex:17;
  margin-top:20px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 0 25px 10px rgba(200, 205, 233, 0.3);
  display: flex;
  flex-direction: row;
}
.body2{
   display: flex;
   justify-content: center;
   flex:520px;
   background-color: rgb(113, 121, 153,0.3);
   background-image: url("../../assets/background.jpg");
}
.bottom{
  flex:40px;
}
/* 弹出层设置背景色  头部 */
.el-dialog__header,.el-dialog__footer,.el-dialog__body{
 background-color: #99A9BF  !important;
 color:aliceblue;
}
</style>
<script>
import StartHeader from '../StartCommon/StartHeader.vue'
import StartFooter from '../StartCommon/StartFooter.vue';
const axios = require('axios');
export default {
   components: { StartHeader, StartFooter},
    data() {
      return {
        activeName: '',
        // 存储原始的用户内容
        tableData: [{
        birthday:"",
        head:"",
        id:"",
        is_exist:"",
        is_male: "",
        permission: "",
        user_name: "",
        user_password: ""
        }],
        //暂存编辑的用户内容
        tableData4: [{
        birthday:"",
        head:"",
        id:"",
        is_exist:"",
        is_male:"",
        permission:"",
        user_name:"",
        user_password:""
        }],
        //存储原始的问题内容
        tableData2: [
          {
            id: 0,
            question_type: '',
           difficulty:'',
            title: '',
            description: '',
            input_description: '',
            output_description: '',
            question_range: '',
            input_sample: '',
            output_sample:'',
            ac: '',
            wa: '',
            time_limit: '',
            memory_limit: '',
            // is_exist:''
          //  access:'',
         
          }],
         gridData: {
           birthday:"",
        head:"",
        id:"",
        is_exist:"",
        is_male: "",
        permission: "",
        user_name: "",
        user_password: ""
        },
         dialogTableVisible: false,
        dialogFormVisible: false,
        dialogFormaVisible: false,
        dialogFormbVisible: false,
         dialogFormcVisible: false,
      //  问题表格table
        form: {
            id: '',
            question_type: '',
           difficulty:'',
            title: '',
            description: '',
            input_description: '',
            output_description: '',
            question_range: '',
            input_sample: '',
            output_sample:'',
            ac: '',
            wa: '',
            time_limit: '',
            memory_limit: '',
        },
      //暂存编辑问题的内容
        form2: {
            id: '',
            question_type: '',
           difficulty:'',
            title: '',
            description: '',
            input_description: '',
            output_description: '',
            question_range: '',
            input_sample: '',
            output_sample:'',
            ac: '',
            wa: '',
            time_limit: '',
            memory_limit: '',
        },
        formLabelWidth: '120px'
      };
  },
  mounted() {
      //请求所有的用户数据
   axios({
                method: 'post',
                url: '/getAllUsers',
             }).then(res => {
               this.tableData = res.data;
               console.log(res.data)
            })

    axios({
         method: 'get',
                url: '/getQuestion',
    }).then(res => {
      this.tableData2 = res.data;
      console.log(res.data)
      })
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      myspace() {
         this.$router.replace('/Myspace')
      },
      myinformation() {
        this.$router.replace('/Myinformation')
      },
      manage() {
        this.$router.replace('/Manage')
      },
      ClickManage(tab, event) {
        console.log(tab, event);
        },
      handleEdit(row) {
        console.log(row);
      },
      handleDelete(row) {
     axios({
         method: 'post',
    //  Content-Type:"application/json",
      url: '/deleteQuestionById',
      data: {id:row.id},
      dataType: 'json',
         //contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
         headers: {
             'Content-Type': 'application/json;charset=utf-8'
         }
    }).then(res => {
        console.log(res.data)
       this.$message({
            message: '删除成功',
            type: 'success'
       });
      })
    console.log({id:row.id})
      },
      addClickQuestion() {
        console.log("hello") 
        var obj = this.form
        console.log(obj)
        axios({
         method: 'post',
    //  Content-Type:"application/json",
      url: '/createQuestion',
      data:obj ,
      dataType: 'json',
         //contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
         headers: {
             'Content-Type': 'application/json;charset=utf-8'
         }
        }).then(res => {
          this.form = res.data
    })
      },
  // 强制刷新
   changeSelect(){	 
	this.$forceUpdate() 
      },
    //编辑用户信息储存数据
    handleEditUser(row){
      console.log(row)
      this.tableData4 = row
        console.log(this.tableData4)
      },
      //用户删除功能
      handleDeleteUsers(row) {
    console.log(row.id)
    axios({
    method: 'post',
    //  Content-Type:"application/json",
    url: '/deleteUserById',
    data: {id:row.id},
    dataType: 'json',
    //contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
    headers: {
    'Content-Type': 'application/json;charset=utf-8'
         }
    }).then(res => {
        console.log(res.data)
       this.$message({
            message: '删除成功',
            type: 'success'
       });
      })
      },
      //编辑用户信息
      addClickUserEditor() {
        var obj = this.tableData4
        console.log(obj)
        axios({
         method: 'post',
      url: '/editUserById',
      data:obj ,
      dataType: 'json',
         headers: {
             'Content-Type': 'application/json;charset=utf-8'
                 }
        }).then(res => {
          // this.tableData = res.data
          console.log(res)
    }) 
      },
//增加用户信息
      addClickUser() {
        var obj = this.gridData
        console.log(obj)
        console.log("111111")
        axios({
         method: 'post',
    //  Content-Type:"application/json",
         url: '/register',
         data:obj,
      dataType: 'json',
         //contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
         headers: {
             'Content-Type': 'application/json;charset=utf-8'
         }
        }).then(res => {
          // this.tableData = res.data
          console.log(res)
    }) 
      },
    // addClickUser() {
    //     console.log("hello") 
    //     var obj = this.tableData[0]
    //     console.log(obj)
    //     axios({
    //      method: 'post',
    // //  Content-Type:"application/json",
    //   url: '/register',
    //   data:obj ,
    //   dataType: 'json',
    //      //contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
    //      headers: {
    //          'Content-Type': 'application/json;charset=utf-8'
    //      }
    //     }).then(res => {
    //       // this.tableData = res.data
    //       console.log(res)
    // }) 
    //   },

//编辑题目信息
      addClickQuestionEditor() {
         var obj = this.form2
        console.log(obj)
        axios({
         method: 'post',
      url: '/setQuestionById',
      data:obj ,
      dataType: 'json',
         headers: {
             'Content-Type': 'application/json;charset=utf-8'
                 }
        }).then(res => {
          this.tableData = res.data
          console.log(res)
    }) 
      },
      handleEditQuestion(row){
      console.log(row)
      this.form2 = row
        console.log(this.tableData4)
      },
      
    }
  }
</script>